<template>
  <el-header class="header">
    <div class="header-content">
      <h2>AI 智能助手</h2>
      <el-button type="danger" @click="handleLogout">退出登录</el-button>
    </div>
  </el-header>
</template>

<script lang="ts">
import { defineComponent } from "vue";
import { useStore } from "vuex";
import { useRouter } from "vue-router";
import { ElMessageBox } from "element-plus";

export default defineComponent({
  name: "MainHeader",
  setup() {
    const router = useRouter();
    const store = useStore();

    const handleLogout = () => {
      ElMessageBox.confirm("确定要退出登录吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        store.commit("CLEAR_USER_INFO");
        router.push("/login");
      });
    };

    return {
      handleLogout,
    };
  },
});
</script>

<style lang="scss" scoped>
.header {
  background-color: #fff;
  border-bottom: 1px solid #dcdfe6;
  height: 60px;
  padding: 0;

  .header-content {
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
  }
}
</style> 